<template>
	<!-- 自定义轮播图 -->
	<view class="header" :style="{
		paddingTop:windowInfo.statusBarHeight+'px',
		paddingRight:menuInfo.width+10+'px',
		height:menuInfo.height+10+'px'}">
		<image class="header-logo" src="../../static/logo.png" mode="heightFix"></image>
		<image @click="isShowMenu = !isShowMenu" class="header-menu" src="../../static/nav.png" mode=""></image>
		<view class="header-menu-list" v-show="isShowMenu" :class="isShowMenu ? 'isShowMenu' : '' ">
			<view v-for="item in menuList" class="header-menu-item">{{item.text}}</view>		
		</view>
	</view>
	
	<scroll-view scroll-y scroll-with-animation :scroll-top="scrollTop" @scroll="onScroll" class="scroll-body" :style="{
			height: `calc( 100vh - ${menuInfo.height + 10 + 'px'} - ${ windowInfo.statusBarHeight + 'px' } )`
		}">
		
	<!-- 轮播图 -->
	<swiper class="swiper-banner" autoplay circular indicator-dots indicator-color="rgba(255,255,255,.3)"
	 interval="2000" indicator-active-color="rgba(255,255,255)">
		<swiper-item>
			<image class="swiper-image" src="../../static/swiper.jpg" mode=""></image>
		</swiper-item>
		<swiper-item>
			<image class="swiper-image" src="../../static/swiper.jpg" mode=""></image>
		</swiper-item>
		<swiper-item>
			<image class="swiper-image" src="../../static/swiper.jpg" mode=""></image>
		</swiper-item>
	</swiper>
	<!-- 产品入口 -->
	<view class="entry">
		<view class="entry-item" v-for="item in productList" :key="item.text">
			<image class="entry-image" :src="item.src" mode="heightFix"></image>
			<text class="entry-text">{{item.text}}</text>
		</view>
		<!-- <view class="entry-item">
			<image class="entry-image" src="../../static/entry1.png" mode=""></image>
			<text class="entry-text">全部产品</text>
		</view>
		<view class="entry-item">
			<image class="entry-image" src="../../static/entry1.png" mode=""></image>
			<text class="entry-text">360搜索</text>
		</view>
		<view class="entry-item">
			<image class="entry-image" src="../../static/entry1.png" mode=""></image>
			<text class="entry-text">360商城</text>
		</view>
		<view class="entry-item">
			<image class="entry-image" src="../../static/entry1.png" mode=""></image>
			<text class="entry-text">360游戏</text>
		</view> -->
	</view>
	<!-- 手机软件 -->
	<view class="software">
		<view class="software-gap"></view>
		<view class="software-title">手机软件</view>
		<view class="software-item">
			<view class="software-item-content" v-for="item in softwareList" :key="item.title">
				<!-- <image @click="goToPage('/pages/software/software')" class="software-item-image" :src="item.src" mode="heightFix"></image> -->
				<image @click="goTominiProgram()" class="software-item-image" :src="item.src" mode="heightFix"></image>
				<p class="software-item-title">{{item.title}}</p>
				<p class="software-item-size">{{item.size}}</p>
				<!-- #ifdef H5 -->
				<a :href="item.download" class="software-item-download a">下载</a>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<!-- <navigator url="/pages/software/software" class="software-item-download">查看</navigator> -->
				<!-- 打开其他小程序 -->
				<navigator short-link="#小程序://滴滴出行 | 打车骑行火车租车代驾/4kuRTwro0NzKX4n" target="miniProgram" class="software-item-download">打开</navigator>
				<!-- #endif -->
			</view>
		</view>
		<view class="software-search">
			<view class="software-search-item" v-for="item in searchList" :key="item.text">
				<image class="software-search-image" :src="item.src" mode="heightFix"></image>
				<text class="software-search-text">{{item.text}}</text>
			</view>
		</view>	
	</view>
	<!-- 分割线 -->
	<view class="divider"></view>
	<!-- 智能硬件 -->
	<view class="hardware">
		<text class="floor-title">智能硬件</text>
		<view class="hardware-list">
			<view v-for="item in hardwareList" :class="item.type" :key="item.name">
				<text class="hardware-name">{{item.name}}</text>
				<text v-if="item.type !== 'hardware-item02'" class="hardware-desc">{{item.desc}}</text>
				<image class="hardware-image" :src="item.src" mode=""></image>
				<text v-if="item.type === 'hardware-item02'" class="hardware-desc">{{item.desc}}</text>
			</view>
			<!-- <view class="hardware-item02">
				<text class="hardware-name">360家庭防火墙</text>
				<image class="hardware-image" src="../../static/hardware2.png" mode=""></image>
				<text class="hardware-desc">极速上网 安全无忧</text>
			</view>
			<view class="hardware-item02">
				<text class="hardware-name">360儿童手表</text>
				<image class="hardware-image" src="../../static/hardware3.png" mode=""></image>
				<text class="hardware-desc">为爱守护 乐享生活</text>
			</view>
			<view class="hardware-item03 column">
				<text class="hardware-name">360行车记录仪</text>
				<text class="hardware-desc">安全驾驶 为您保驾护航</text>
				<image class="hardware-image" src="../../static/hardware4.png" mode=""></image>
			</view>
			<view class="hardware-item03 column">
				<text class="hardware-name">360扫地机器人</text>
				<text class="hardware-desc">解放双手 智想生活</text>
				<image class="hardware-image" src="../../static/hardware5.png" mode=""></image>
			</view>
			<view class="hardware-item01 column">
				<text class="hardware-name">360生态链</text>
				<text class="hardware-desc">生态互联 牵手未来</text>
				<image class="hardware-image" src="../../static/hardware6.png" mode=""></image>
			</view> -->
			<view class="hardware-item01 more-flex">
				<text class="moreHardware-name">点击查看更多商品</text>
				<image class="moreHardware-image" src="../../static/右箭头.png" mode=""></image>
			</view>
		</view>
	</view>
	<!-- 分割线 -->
	<view class="divider"></view>
	</scroll-view>
	<image v-show="isShowTop" @click="backTop" class="back-top" src="../../static/backTop.png" mode=""></image>
</template>

<script setup>
	// 获取导航栏高度
	const windowInfo = uni.getWindowInfo()
	// #ifdef MP-WEIXIN
	//获取小程序胶囊信息
	const menuInfo = uni.getMenuButtonBoundingClientRect()
	// #endif
	
	// #ifdef H5
	const menuInfo = {width:0}
	// #endif
	import {reactive,ref} from 'vue'
	const productList = reactive([
		{src:'../../static/entry1.png',text:'全部产品'},
		{src:'../../static/entry2.png',text:'360搜索'},
		{src:'../../static/entry3.png',text:'360商城'},
		{src:'../../static/entry4.png',text:'360游戏'},
	])
	const softwareList = reactive([
		{src:'../../static/software1.png',title:'手机卫士',size:'8.95M',download:'https://sjws.ssl.qihucdn.com/mobilesafe/shouji360/360safe/500193/360MobileSafe.apk'},
		{src:'../../static/software2.png',title:'手机助手',size:'27.75M',download:'https://app.api.sj.360.cn/channel/getUrl?src=100130&app=zs'},
		{src:'../../static/software3.png',title:'浏览器',size:'79.20M',download:'http://msedown.360safe.com/360mse/360mse_17104513.apk'},
		{src:'../../static/software4.png',title:'清理大师',size:'5.8M',download:'http://shouji.360.cn/360cleandroid/m/'},
		{src:'../../static/software5.png',title:'极速浏览器',size:'54.00M',download:'http://msedown.360safe.com/360lite/360mse_ltb00014.apk'},
		{src:'../../static/software6.png',title:'省电王',size:'2.8M',download:'http://msoftdl.360.cn/360batterydoctor/360BatteryDoctor_offical.apk'},
		{src:'../../static/software7.png',title:'免费WIFI',size:'3.8M',download:'http://down.360safe.com/360ap/360freewifi_beta_3.3.5.apk'},
		{src:'../../static/software8.jpg',title:'安全客',size:'9.98M',download:'https://static.anquanke.com/download/anquanke.apk'},
	])
	const searchList = reactive([
		{src:'../../static/entry2.png',text:'360搜索'},
		{src:'../../static/entry3.png',text:'360商城'},
		{src:'../../static/search1.png',text:'手机专家'},
		{src:'../../static/search2.png',text:'360天气'},
		{src:'../../static/search3.png',text:'360借条'},
	])
	const goToPage = (url)=>{
		uni.navigateTo({
			url:url
		})
	}
	const goTominiProgram = ()=>{
		uni.navigateToMiniProgram({
			url:'#小程序://滴滴出行 | 打车骑行火车租车代驾/4kuRTwro0NzKX4n'
		})
	}
	
	const hardwareList = reactive([
		{type:'hardware-item01',name:'360智能摄像机',desc:'有家有TA 安心相伴',src:'../../static/hardware1.png'},
		{type:'hardware-item02',name:'360家庭防火墙',desc:'极速上网 安全无忧',src:'../../static/hardware2.png'},
		{type:'hardware-item02',name:'360儿童手表',desc:'为爱守护 乐享生活',src:'../../static/hardware3.png'},
		{type:'hardware-item03',name:'360行车记录仪',desc:'安全驾驶 为您保驾护航',src:'../../static/hardware4.png'},
		{type:'hardware-item03',name:'360扫地机器人',desc:'解放双手 智想生活',src:'../../static/hardware5.png'},
		{type:'hardware-item01',name:'360生态链',desc:'生态互联 牵手未来',src:'../../static/hardware6.png'},
	])
	const scrollTop = ref(0)
		const backTop = () => {
			scrollTop.value = 0
		}
	//滚动条滑动 防抖
	let timerId = -1
	const isShowTop = ref(false)
	const onScroll = (event)=>{
		clearTimeout((timerId))
		timerId = setTimeout(()=>{
			scrollTop.value = event.detail.scrollTop
			if(scrollTop.value>=200){
				isShowTop.value =true
			}else{
				isShowTop.value =false
			}
		},100)
	}
	const menuList = reactive([
		{text:'手机软件'},
		{text:'智能硬件'},
		{text:'用户服务'},
		{text:'政企服务'},
		{text:'360商城'},
		{text:'手机游戏'},
		{text:'论坛'},
		{text:'社会招聘'},
		{text:'校园招聘'},
	])
	const isShowMenu = ref(false)
</script>

<style lang="scss">
	@import "../../uni.scss";
	.header{
		/* width: 750rpx; */
		height: 96rpx;
		background-color: #23ac28;
		padding-top: 60rpx;
		padding-left: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		.header-logo{
			width: 166rpx;
			height: 64rpx;
		}
		.header-menu{
			width: 44rpx;
			height: 32rpx;
		}
		.header-menu-list{
			width: 100%;
			height: 330rpx;
			background-color: rgba(0,0,0,.5);
			position: absolute;
			bottom: -330rpx;
			left: 0;
			
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx;
			
			opacity: 0;
			transition: all 0.4s;
			z-index: -1;
			pointer-events: none;
		}
		.isShowMenu{
			z-index: 1;
			opacity: 1;
			pointer-events: auto;
			
		}
		.header-menu-item{
			width: 218rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #bbbbbb;
			font-size: 32rpx;
			border: 2rpx solid #bbbbbb;
			box-sizing: border-box;
		}
	}
	
	.swiper-banner,
	.swiper-image{
		width: 100%;
		height: 416rpx;
	}
	
	/* scss */
	.entry{
		display: flex;
		height: 130rpx;
		padding-top: 50rpx;
		padding-bottom: 20rpx;
		.entry-item{
			width: 25%;
			display: flex;
			flex-direction: column;
			border-right: 1rpx solid #ddd;
			justify-content: space-between;
			align-items: center;
		}
		.entry-image{
			width: 92rpx;
			height: 82rpx;
		}
		.entry-text{
			font-size: 28rpx;
		}
	}
	
	.software{
		height: 1040rpx;
		.software-gap{
			height: 20rpx;
			background-color: #ebebeb;
		}
		.software-title{
			height: 72rpx;
			font-size: 48rpx;
			padding-top: 50rpx;
			padding-left: 40rpx;
			color: #333;
		}
		.software-item{
			height: 558rpx;
			display: flex;
			flex-wrap: wrap;
			.software-item-content{
				width: 22%;
				height: 250rpx;
				padding-top: 30rpx;
				padding-left: 18rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;
				.software-item-image{
					width: 96rpx;
					height: 96rpx;
				}
				.software-item-size{
					color: #cdcdcd;
				}
				.software-item-download{
					text-align: center;
					width: 80rpx;
					font-size: 28rpx;
					color: #23ac28;
					background-color: #def3e1;
					border-radius: 20rpx;
					height: 48rpx;
					padding-top: 4rpx;
				}
			}
			
		}
		.software-search{
			padding-top: 50rpx;
			padding-bottom: 50rpx;
			height: 200rpx;
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
			align-items: center;
			.software-search-item{
				width: 23%;
				height: 80rpx;
				display: flex;
				margin-left: 8rpx;
				margin-right: 6rpx;
				justify-content: center;
				background-color: #f8f8f8;
				align-items: center;
				.software-search-image{
					width: 28rpx;
					height: 28rpx;
				}
				.software-search-text{
					font-size: 24rpx;
				}
			}
		}
	}
	.floor-title{
		font-size: 48rpx;
		color: #333;
		display: flex;
		padding-left: 30rpx;
	}
	
	.hardware{
		overflow: hidden;
		padding-top: 50rpx;
		height: 1250rpx;
		.hardware-list{
			padding-top: 40rpx;
			view:nth-child(1),
			view:nth-child(4),
			view:nth-child(6){
				border-right: 1rpx solid #ebebeb;
			}
		}
		.hardware-item01,
		.hardware-item02,
		.hardware-item03{
			width: 50%;
			border-top: 1rpx solid #ebebeb;
			float: left;
			box-sizing: border-box;
		}
		.hardware-item01{
			height: 398rpx;
		}
		.hardware-item02{
			height: 200rpx;
			padding-right: 0;
			padding-bottom: 0;
			.hardware-name{
				display: block;
			}
			.hardware-image{
				width: 168rpx;
				height: 112rpx;
				float: right;
				padding-left: 0;
			}
		}
		.hardware-item03{
			height: 350rpx;
		}
		.hardware-name{
			font-size: 30rpx;
			color: #333;
			margin-top: 50rpx;
			padding-left: 40rpx;
			display: block;
		}
		.hardware-desc{
			font-size: 27rpx;
			color: #999;
			margin-top: 20rpx;
			padding-left: 40rpx;
		}
		.hardware-image{
			width: 270rpx;
			height: 178rpx;
			padding-left: 40rpx;
		}
		.more-flex{
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f8f8f8;
		}
		.moreHardware-name{
			display: block;
			width: 130rpx;
			font-size: 30rpx;
			color: #bbb;
		}
		.moreHardware-image{
			width: 100rpx;
			height: 100rpx;
			
		}
	}
	.scroll-body{
		height: calc(100vh - 100rpx);
	}
	.backTop{
		width: 80rpx;
		height: 80rpx;
		background-color: $uni-color-primary;
		position: fixed;
		right: 40rpx;
		bottom:80rpx;
		border-radius: 50%;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>
